<template>
    <div class="public-form">
      <div class="query-container">
        <el-form inline
                 label-width="90px"
                 style="overflow: hidden;">
          <div style="width:78%;float: left">
            <el-form-item v-if="menuId == 311 || menuId == 314"
                        label="月份"
                        :required="true">
              <el-date-picker v-model="time"
                              style="width: 226px"
                              type="monthrange"
                              range-separator="至"
                              start-placeholder="开始月份"
                              end-placeholder="结束月份"
                              :picker-options="pickerOptions"
                              @change="selectMonth">
              </el-date-picker>
            </el-form-item>
            <el-form-item  v-else-if="menuId == 367 || menuId == 368"
              label="发货时间" :required="true">
              <el-date-picker
                v-model="fromTime"
                style="width: 226px"
                type="daterange"
                range-separator="至"
                start-placeholder="开始日期"
                end-placeholder="结束日期"
                value-format="yyyy-MM-dd"
                clearable
                @change="fromTimeGive">
              </el-date-picker>
            </el-form-item>
            <el-form-item label="年份" v-else>
              <el-select v-model="particularYear"
                          style="width: 226px"
                          placeholder="请选择年份"
                          @input="clearYear">
                <el-option v-for="item in yearList"
                            :key="item.id"
                            :label="item.name"
                            :value="item.name"/>
              </el-select>
            </el-form-item>
            <el-form-item label="合同编号"
                          v-if="menuId == 333 || menuId == 334">
              <el-input v-model="params.contractNo"
                          style="width: 226px"
                          placeholder="请输入合同编号"></el-input>
            </el-form-item>
            <el-form-item label="发货方名称"
                          v-if="menuId == 311 || menuId == 313 || menuId == 314 || 
                                menuId == 315 || menuId == 317 || menuId == 333 ||
                                menuId == 334 || menuId == 335 || menuId == 368">
              <el-input v-model="params.customerName"
                          style="width: 226px"
                          placeholder="请输入发货方名称"></el-input>
            </el-form-item>
            <el-form-item label="承运方名称"
                          v-if="menuId == 321 || menuId == 327 || menuId == 328 || 
                                menuId == 329 || menuId == 331 || menuId == 367">
              <el-input v-model="params.carrierName"
                        style="width: 226px"
                        placeholder="请输入承运方名称"></el-input>
            </el-form-item>
            <el-form-item label="收货方名称"
                          v-if="menuId == 333 || menuId == 334 || menuId == 322">
              <el-input v-model="params.consigneeName"
                        style="width: 226px"
                        placeholder="请输入收货方名称"></el-input>
            </el-form-item>
            <el-form-item label="运单类型" v-if="menuId == 357">
              <el-select v-model="params.orderTypeName" placeholder="请选择" style="width: 226px" clearable>
                <el-option
                  v-for="(item,index) in orderTypeOption"
                  :key="index"
                  :label="item.label"
                  :value="item.value">
                </el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="运输模式" v-if="menuId == 333 || menuId == 334">
              <el-select v-model="params.transportMode" placeholder="请选择" style="width: 226px" clearable>
                <el-option
                  v-for="(item,index) in ModeOptions"
                  :key="index"
                  :label="item.label"
                  :value="item.value">
                </el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="到达省"
                          v-if="menuId == 333 || menuId == 334">
              <el-input v-model="params.toProvince"
                        style="width: 226px"
                        placeholder="请输入到达省"></el-input>
            </el-form-item>
            <el-form-item label="到达市"
                          v-if="menuId == 333 || menuId == 334">
              <el-input v-model="params.toCity"
                        style="width: 226px"
                        placeholder="请输入到达市"></el-input>
            </el-form-item>
          </div>
          <div style="width:202px;float: right">
            <el-form-item style="float: right">
              <el-button type="primary"
                          icon="el-icon-search"
                          @click="search(1)">查询</el-button>
              <el-button type="primary"
                          icon="el-icon-delete"
                          @click="resetForm">清除</el-button>
            </el-form-item>
          </div>
        </el-form>
      </div>
      <div class="bottom-container">
        <el-form style="overflow: hidden">
          <el-form-item style="float: right">
            <el-button type="default"
                       icon="el-icon-s-promotion"
                       @click="handleExport">导出</el-button>
          </el-form-item>
        </el-form>
        <el-table class="table-container"
                  ref="tableData"
                  stripe
                  border
                  :data="tableData"
                  v-loading="loading"
                  element-loading-text="加载中"
                  element-loading-spinner="el-icon-loading"
                  :show-summary="menuId == 367?false:(menuId == 368?false:true)"
                  :summary-method="getSummaries"
                  @sort-change="sortChange">
            <el-table-column
              :show-overflow-tooltip="true"
            	v-for="(column, index) in columns"
              :key="index"
              :prop="column.prop"
              :label="column.name"
              :width="column.width?column.width:''"
              :min-width="column.minWidth?column.minWidth:''"
              :align="column.align?column.align:'right'"
              :sortable="column.sortable?'custom':false"
            >
              <template slot-scope="scope">
                <span v-if="column.rmsData">
									{{transitionText(scope.row, column.rmsData, column.prop)}}</span>
                <span v-else-if="column.align != 'left'">
									{{conversion(scope.row[column.prop])}}</span>
								<span v-else>{{scope.row[column.prop]}}</span>
              </template>
            </el-table-column>
						<el-table-column 
                            label='操作' width="80" align="center"
                            v-if="(menuId == 311 || menuId == 321 || menuId == 322 ||
                                  menuId == 335) && tableData.length > 0">
							<template slot-scope="scope">
								<span style="color:var(--prev-color-primary);cursor: pointer" 
                      @click="dialog(scope.row)">明细</span>
							</template>
						</el-table-column>
            <el-table-column 
                            label='操作' width="80" align="center"
                            v-if="(menuId == 367 || menuId == 368) && tableData.length > 0">
							<template slot-scope="scope">
								<span style="color:var(--prev-color-primary);cursor: pointer" 
                      @click="dialog(scope.row)">异常明细</span>
							</template>
						</el-table-column>
        </el-table>
        <span v-show="tableData.length > 0 && menuId != 367 && menuId != 368"
              style="color: var(--prev-color-primary);">说明:由于四舍五入的原因，本页合计和总合计可能存在误差。</span>
        <el-pagination v-show="tableData.length > 0"
                       background
                       layout="total, sizes, prev, pager, next, jumper"
                       :total="total"
                       :page-sizes="pageSizeOptions"
                       :page-size.sync="pageSize"
                       :current-page.sync="pageNo"
                       @size-change="handleSizeChange"
                       @current-change="handleCurrentChange">
        </el-pagination>
      </div>
			<el-dialog title="明细"
				         :visible.sync="dialogVisible"
				         width="98%"
				         :value.sync="shipData"
				         :before-close="handleClose">
				<RmsDetail :value="shipData" 
                   :shipTime="shipTime"></RmsDetail>
			</el-dialog>
    </div>
  </template>
  
  <script src="./rmsJs/StateOfGoods.js"></script>
  
  <style scoped>
  .table-container >>> .el-table__body-wrapper {
    height: calc(100% - 68px);
    overflow-y: auto;
  }
  .bottom-container >>> .el-pagination {
    margin-top: 20px;
    /* text-align: right; */
  }
  .bottom-container >>> .el-table tr {
    background-color: var(--prev-bg-white);
    height: 50px;
    font-size: 14px;
  }
  .public-form >>> .el-table th.el-table__cell.is-leaf,
  .el-table td.el-table__cell {
    border-bottom: 1px solid var(--prev-border-color-lighter);
    font-size: 14px;
    font-family: PingFang SC;
    font-weight: 400;
    line-height: 20px;
    color: #333333;
    opacity: 1;
  }
  </style>
  <style lang="scss" scoped>
  .public-form {
    width: 100%;
    height: 100%;
    .query-container {
      padding: 20px 20px 0 0;
      background: var(--prev-bg-white);
    }
    .bottom-container {
      padding: 20px;
      margin-top: 12px;
      background: var(--prev-bg-white);
      height: calc(100vh - 270px);
      .table-container {
        height: calc(96% - 110px);
        .target-power {
          display: flex;
          .power {
            display: flex;
            align-items: center;
          }
        }
      }
    }
    .el-table {   overflow: visible !important; }
  }
  </style>
  